<html>
    <head>
        <title>Mobile FX</title>
        
        <style type="text/css">
            body { background-color: #000000; }
            img { margin: 3px; }
        </style>   

        <script type="text/javascript">
            function playSound() {
                // Figure out which image was clicked
                var sender = window.event.srcElement;
                var soundUrl = sender.getAttribute("snd");

                // Stop existing sound effect (if any)
                var soundPlayer = document.getElementById("soundPlayer");
                if (soundPlayer != null) {
                    document.removeChild(soundPlayer);
                }

                // Start the new sound effect
                soundPlayer = document.createElement("bgsound");
                soundPlayer.setAttribute("id", "soundPlayer");
                soundPlayer.setAttribute("src", soundUrl);
                document.appendChild(soundPlayer);
            }
            
            function loadSoundPack(name) {
                data = new ActiveXObject("MSXML2.DOMDocument.3.0");
                data.load("SoundPacks\\" + name + ".xml");

                // Add an img element for each sound effect. Hook
                // up the onclick event handler to call playSound
                // when the img is clicked.
                var buttons = data.selectNodes('/MobileFX/SoundPack/Buttons');
                for (var i = 0; i < buttons.length; i++) {
                    var button = buttons.item(i);

                    var imageUrl = "SoundPacks\\images\\" + name + "\\" + button.selectSingleNode("IconFile/text()").nodeValue;
                    var soundUrl = "SoundPacks\\effects\\" + name + "\\" + button.selectSingleNode("SoundFile/text()").nodeValue;

                    var img = document.createElement("img");
                    img.setAttribute("src", imageUrl);
                    img.setAttribute("snd", soundUrl);
                    img.onclick = playSound;

                    pnlButtons.appendChild(img);
                }
            }
        
            function onWidgetLoad() {
                loadSoundPack('default');

                var menu = widget.menu;
                
                var menu1002 = menu.createMenuItem(1002);
                menu1002.text = "About";
                menu1002.onSelect = onAbout;
                menu.append(menu1002);
            }

            function onAbout() {
                alert("TODO - display about dialog...");
            }
        </script>
    </head>
    
    <body onload="onWidgetLoad();">    
        <div id="pnlButtons"></div>
    </body>
</html>